<html xmlns:html="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE7 Test Page</title>
<meta name="author" content="Dean Edwards"/>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="ie7-standard-p.js" type="text/javascript"></script>
<script src="ie7-css3-selectors.js" type="text/javascript"></script>
<script src="ie7-css-strict.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
 body {background-color: #ccc;}
 img {border: none;}
 h1 {font-family: monospace;}
 h2 {background-color: black; color: white; font-style: normal;}
 h3 {margin: 0.1em 0;}
</style>
</head>

<body>
<div class="document">
<div class="header">
<h1>IE7 { css2: auto; }</h1>
<hr />
</div>

<div class="content">

<h2>Black &amp; White Test</h2>

<h3>Legend</h3>
<style type="text/css">
 div.legend {height: 20px; font-weight: bold; text-indent: 4px;}
 #fail {background-color: black; color: white;}
 #pass {background-color: white; color: black;}
</style>
<div class="legend" id="pass">PASS</div>
<div class="legend" id="fail">FAIL</div>

<hr />

<h3>ie7-html4.js</h3>
<style type="text/css">
 #ie7-html4 {background-color: black; height: 20px;}
 #ie7-html4 abbr {display: block; background-color: white; height: 20px;}
</style>
<div id="ie7-html4"><abbr>&nbsp;</abbr></div>

<h3>ie7-layout.js</h3>
<style type="text/css">
 #ie7-layout {background-color: black; height: 20px; overflow: hidden;}
 #ie7-layout div.box {position: relative; top: -40px; background-color: white;
   height: 40px; border-top: 20px black solid;}
</style>
<div id="ie7-layout"><div class="box"></div></div>

<h3>ie7-graphics.js</h3>
<style type="text/css">
 #ie7-graphics {background-color: white; height: 20px;}
 #ie7-graphics div.box {height: 20px; background: url(test-trans.png);}
</style>
<div id="ie7-graphics"><div class="box"></div></div>

<h3>ie7-fixed.js</h3>
<style type="text/css">
 #ie7-fixed {background-color: white; height: 20px;}
 #ie7-fixed div.box {position: fixed; top: -20px; background-color: black; height: 20px;}
</style>
<div id="ie7-fixed"><div class="box"></div></div>

<h3>ie7-css2-selectors.js</h3>
<style type="text/css">
 #ie7-css2-selectors {background-color: black; height: 20px;}
 #ie7-css2-selectors > span {display: block; background-color: white; height: 20px;}
</style>
<div id="ie7-css2-selectors"><span>&nbsp</span></div>

<h3>ie7-css3-selectors.js</h3>
<style type="text/css">
 #ie7-css3-selectors {background-color: black; height: 20px;}
 #ie7-css3-selectors:empty {background-color: white;}
</style>
<div id="ie7-css3-selectors"></div>

<h3>ie7-css-strict.js</h3>
<style type="text/css">
 #ie7-css-strict {background-color: black; height: 20px;}
 #ie7-css-strict > span.strict {display: block; background-color: white; height: 20px;}
 #ie7-css-strict > span {display: block; background-color: black}
</style>
<div id="ie7-css-strict"><span class="strict"></span></div>
</div>

<div class="footer">
<hr />
<a href="http://dean.edwards.name/IE7/"><img src="ie7.gif" width="80" height="15" alt="IE7 Enhanced"/></a>
</div>
</div>
</body>
</html>
